<template>
  <view class="tab-bar">
    <view
      v-for="(tab, index) in tabs"
      :key="index"
      class="tab-item"
      @click="selectTab(index)"
      :class="{ 'selected': selectedIndex === index }"
    >
      <uni-icons :type="selectedIndex === index ? tab.selectedIcontype : tab.icontype" class="tab-icon" />
      
      <text class="tab-text">{{ tab.text }}</text>
    </view>
  </view>
</template>

<script>
import uniIcons from '../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
export default {
  components: { uniIcons },
  props: {
    tabs: {
      type: Array,
      required: true,
      default: () => []
    },
    // 初始选中的tab索引，可以通过父组件传递
    initialSelectedIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      selectedIndex: this.initialSelectedIndex
    };
  },
  methods: {
    selectTab(index) {
      this.selectedIndex = index;
      // 跳转到选中的页面
      const selectedTab = this.tabs[index];
      if (selectedTab && selectedTab.pagePath) {
        uni.redirectTo({ url: selectedTab.pagePath });
      }
    }
  }
};
</script>

<style scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background-color: #ffffff;
  border-top: 1px solid #ccc;
  z-index: 999; /* 确保导航条在最上层 */
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1; /* 确保每个tab项平分宽度 */
}

.tab-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 2px; /* 图标和文字之间的间距 */
}

.tab-text {
  font-size: 12px;
  text-align: center;
}

.tab-item.selected .tab-text {
  color: #000; /* 选中时的文字颜色 */
}

</style>
